<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>半圆形
    </title>
</head>
<body>
<!--半圆形-->
<!--利用border-radius属性制作半圆形的两个要点-->
<!--制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值-->
<!--制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值-->

<style>
    #div1{
        width: 400px;
        height: 200px;
        background-color: red;
        /*border-top-right-radius: 200px;*/
        /*border-top-left-radius: 200px;*/
        border-radius: 200px 200px 0px 0px;
    }
    #div2{
        margin-top: 50px;
        width: 400px;
        height: 200px;
        /*border: 5px solid red;*/
        background-color: red;
        border-radius: 0px 0px 200px 200px;
    }
    #div3{
        width: 200px;
        height: 400px;
        background-color: red;
        /*border-top-left-radius: 200px;*/
        /*border-bottom-left-radius: 200px;*/
        border-radius: 200px 0px 0px 200px;
    }
    #div4{
        width: 200px;
        height: 400px;
        background-color: red;
        /*border-top-left-radius: 200px;*/
        /*border-bottom-left-radius: 200px;*/
        border-radius: 0px 200px 200px 0px;
    }
</style>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>